<style lang="scss">
  @import 'index';

</style>
<style type="text/css">
  .imgbox{width: 100%}
  .imgbox img{max-width: 100% !important;}

</style>
<template>

  <div class="ga-container">
    <!-- <div class="ga-index">
      <div class="ga-side-bar top" @click="returnTop"></div>
    </div> -->
    <div class="ga-product-detail">
      <!-- 顶部swiper -->
      <div>
        <swiper
          :indicator-dots="swiper.indicatorDots"
          :autoplay="swiper.autoplay"
          :interval="swiper.interval"
          :duration="swiper.duration"
          indicator-color="white"
          indicator-active-color="#ff3a35">
          <block v-for="(item,index) in swiper.imgUrls"  :key="index">
            <swiper-item>
              <image mode="aspectFit" :src="item" class="slide-image"/>
            </swiper-item>
          </block>
        </swiper>
      </div>

      <!--拼团 start-->
      <div class="ga-cell top-box">
        <div class="item">
          <div class="box">
            <span class="span1">商城价</span>
            <span class="span2">¥</span>
            <span class="span3">{{data.shop_price}}</span>
            <div>
              <p class="throughLine">¥{{data.market_price}}</p>
              <p>市场价</p>
            </div>
          </div>

          <div class="num">已售{{data.sale_num}}件</div>
        </div>
      </div>
      <!--拼团 end-->

      <!--第二件半价 || 秒杀价 || 新鲜预售satrt-->
      <!--<div class="ga-cell top-box">
        <div class="item">
          <div class="box">
            <span class="em">第二件半价</span>
            <span class="span2">¥</span>
            <span class="span3">29</span>
            <span class="throughLine mt10">¥39</span>
          </div>

          <div class="num">已抢1255件</div>
        </div>
      </div>-->
      <!--第二件半价 || 秒杀价 || 新鲜预售 end-->

      <div class="ga-cell type-box">
        <div class="item">
          <div>
            <p>
              <!-- <span class="btn primary"></span> -->
              <span class="title">{{data.goods_name}}</span>
            </p>
            <p class="gGray mt10"></p>
          </div>

          <div class="share-box">
            <button class="gaIcon share" open-type='share'></button>
            <p class="gGray">分享</p>
          </div>
        </div>
      </div>

      <!--第二件半价 start-->
      <!--<div class="special-cell">
        <i class="gaIcon half"></i>
        <span class="span1">第二件半价</span>
        <span class="span2">准时抢好品 限量不等人</span>
      </div>-->
      <!--第二件半价 end-->

      <!--秒杀 start-->
      <!--<div class="special-cell">
        <i class="gaIcon clock"></i>
        <span class="span1">限时秒杀</span>
        <span class="span2">准时抢好品 限量不等人</span>
      </div>-->
      <!--秒杀 end-->

      <!--新鲜预售 start-->
      <!--<div class="special-cell">
        <span class="span1">新鲜预售</span>
        <span class="span2">准时抢好品 限量不等人</span>
      </div>-->
      <!--新鲜预售 end-->

      <div class="ga-cell mark-box">
        <div class="item">
          <ul class="mark-list clearfix">
           <li v-for="item in data.goods_lebel" :key="index"><i class="dot"></i>{{item}}</li>
           <!-- <li><i class="dot"></i>假一赔十</li>
           <li><i class="dot"></i>7天退换</li>
           <li><i class="dot"></i>48小时发货</li> -->
          </ul>

          <span class="dots">...</span>
        </div>
      </div>

      <!--正在进行的拼团-->
      <!-- <h1 class="h1 mt10">正在进行的拼团，可直接参与</h1>
      <ul class="ga-cell now-bargain-list">
        <li class="item">
          <div class="img-box">
            <img mode="widthFix" src="http://ga-1255639017.file.myqcloud.com/images/test/img1.jpg" alt="">
          </div>
          <div class="box1">
            <p class="p1">拼团菓粉</p>
            <p class="p2">拼团价格太刺激啦~</p>
          </div>
          <div class="box2">
            <p class="p1">还差1人成团</p>
            <p class="p2">仅剩 23:09:32</p>
          </div>
          <a href="#" class="btn white">去参团</a>
        </li>
        <li class="item">
          <div class="img-box">
            <img mode="widthFix" src="http://ga-1255639017.file.myqcloud.com/images/test/img1.jpg" alt="">
          </div>
          <div class="box1">
            <p class="p1">拼团菓粉</p>
            <p class="p2">拼团价格太刺激啦~</p>
          </div>
          <div class="box2">
            <p class="p1">还差1人成团</p>
            <p class="p2">仅剩 23:09:32</p>
          </div>
          <a href="#" class="btn white">去参团</a>
        </li>
      </ul> -->

      <!--商品评价-->
      <div class="gCell h1 mt10">
        <div>商品评价（{{eva.count}}）</div>
        <a :href="'/pages/comments/main?id='+data.id"><div>
          <span class="gOrange">{{eva.praiserate}}%</span>
          <span class="mr10">好评</span>
          <i class="icon-angle-right f26"></i>
        </div>
        </a>
      </div>
      <ul class="comment-list">
        <li class="item" v-for="(item,key) in eva.data" v-if="key<2" :key="key">

          <div class="person">
            <div>
              <div class="img-box">
                <img class="img" :src="item.icon" alt="">
              </div>
              <span class="name">{{item.nickname}}</span>
            </div>
          </div>

          <div class="con-box">{{item.evaluate}}
          </div>

          <ul class="img-list clear">
            <li class="img-box" v-for="(imgvalue,imgkey) in item.imglist" :key="imgkey">
              <img class="img" :src="imgvalue" alt="">
            </li>
          </ul>
        </li>
      </ul>
      <a :href="'../comments/main?id=' + data.id" class="link-all">查看全部评价 <i class="icon-angle-right"></i></a>

      <!--拼团推荐-->
      <h2 class="h2 mt10">猜你喜欢</h2>
      <ul class="ga-bargain-list">
        <li class="item" v-for="(item,index) in like" :key="index">
          <a :href="'/pages/shopDetail/main?id='+item.id">
            <div class="img-box">
              <img class="img" :src="item.icon" alt="">
            </div>
            <div class="con-box">
              <p class="p1">{{item.goods_name}}</p>
              <p class="p2">
                <span class="f30 gOrange">¥{{item.shop_price}}</span>
                <span>已售{{item.sale_num}}件</span>
              </p>
            </div>
          </a>
        </li>

      </ul>

      <!--详情内容-->
      <div class="pro-detail mt10">
         <div v-html="data.goods_desc" class="imgbox"></div>
      </div>

      <!--固定fixed底部-->
      <div class="ga-bottom-fixed">
        <div class="bottom">
          <!--tabs-->
          <ul class="tabs">
            <li class="item">
              <a @click="bindSwitchTab('../home/main')">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/tab_icon1.png" alt="">
                <p>首页</p>
              </a>
            </li>
            <li class="item">
              <a @click="collect()">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/star.png" alt="">
                <p>收藏</p>
              </a>
            </li>
            <li class="item">
              <a @click="bindSwitchTab('../shopCart/main')">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/tab_icon3.png" alt="">
                <p>购物车</p>
              </a>
            </li>
          </ul>

          <div class="btn-box">
            <!--(1)售罄-->
            <!--<a href="#" class="btn btn">
              <p>已售击</p>
              <p>去首页看看</p>
            </a>-->

            <!--(2)开团-->
            <a class="btn btn1" @click="addcart(0)">
              <p>加入购物车</p>
            </a>
            <!--说明：未开团
              禁止点击:disable
            -->
            <a class="btn btn2" @click="addcart(1)">
              <p class="mt10">¥ {{data.shop_price}}</p>
              <p>立即购买</p>
            </a>
          </div>
        </div>
      </div>

      <!-- 选择属性弹层start-->
      <div>
        <div class="ga-mask" :class="{hide:!actionSheet}" @click="actionSheet=false"></div><!-- ga-mask-->

        <div class="ga-action-sheet" :class="{active:actionSheet}">

          <ul class="ga-media-list ga-detail-msg">
            <li class="item">
              <div class="item-media">
                <image class="img-box" mode="aspectFill" :src="data.icon"></image>
              </div>
              <div class="item-inner">
                <p>{{data.goods_name}}</p>
                <p class="p1">¥{{data.shop_price}}</p>
                <p class="p2">库存 <span>{{data.goods_number}}</span>件</p>
              </div>
            </li>
          </ul>

          <div class="ga-detail-property">
            <div v-for="(item,index2) in data._property" :key="index2">
              <h1 class="tit">{{item.attr_name}}</h1>
              <ul class="property-list clear">
                <li class="item" :class="{'active':index ===iac[index2]}" v-for="(attr,index) in item.goods_attr_list" :key="index"  @click="chek(index2,index,attr.id,attr.attr_price)">
                  {{attr.attr_value}}
                </li>
              </ul>
            </div>
          </div>

          <div class="num-box">
            <span class="pull-left">购买数量</span>
            <div class="pull-right">
              <gaNumber :val="number" :min="1" @on-change="numChange"></gaNumber>
            </div>
          </div>

          <div class="link-box mt20">
            <a class="link" :class="{'disable':!isdisable}" @click="setcar">确定</a>
          </div>

        </div>
      </div>
      <!-- 选择属性弹层end-->

    </div>
  </div>
</template>

<script>
import {isLogin,handleError,showToast} from '@/utils/handleLogin'
import gaNumber from '@/components/gaNumber'
export default {
  components: {
    gaNumber
  },
  data () {
    return {
      colorItems:['红色','蓝色','褐色'],
      sizeItems:['xl','xs','l'],
      actionSheet:false,
      swiper: {
        imgUrls: [],
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 1000
      },
      data: [],
      like: [],
      isHasattr: false,
      gobuy: false,
      eva: {
         data:[],
         count:0,
         praiserate:0,
      },
      isCollect:false,
      token:'',
      iac: [],
      attrlist: [],
      attrprice: [],
      attrcount: 0,
      number: 1,
      Originalprice: 0,
      isdisable: false

    }
  },
  methods: {
    /** 接口数据 */
    async load () {
      /*商品信息*/
      let res = await this.$_util.ajax.get('https://guo-a.com/mapi/product/getdetail?id=' + this.$root.$mp.query.id)
      if (res.code === 200) {
        this.swiper.imgUrls = res.data.atlas
        if (res.data.hasOwnProperty('goods_desc')) {
          res.data.goods_desc = this.formatImg(res.data.goods_desc)
        }
        this.data = res.data
        this.Originalprice = Number(res.data.shop_price)
        if (res.data.hasOwnProperty('_property')) {
          this.isHasattr = true
          this.attrcount = res.data._property.length
        }
      }
      /*猜你喜欢*/
      let like = await this.$_util.ajax.get('https://guo-a.com/mapi/product/getlike?id=' + this.$root.$mp.query.id)
      if (like.code === 200) {
        this.like = like.data
      }
      /*商品评价*/
      let evalist = await this.$_util.ajax.get('https://guo-a.com/mapi/product/geteva?id=' + this.$root.$mp.query.id)
      console.log(evalist)
      if(evalist.code===200){
        this.eva.data=evalist.data;
        this.eva.count=evalist.count;
        this.eva.praiserate=evalist.praiserate;
      }
      /*判断是否收藏*/
      if(this.$store.state.Token){
        let collectres = await this.$_util.ajax.post('https://guo-a.com/mapi/collect/iscollect?token='+this.$store.state.Token,{
            id:this.$root.$mp.query.id
        })
        if(collectres.code === 200){
           if(collectres.iscollect === 1){
              this.isCollect = true;
           }

        }
      }
    },
    addcart (isgobuy) {
      if(isgobuy){
        this.gobuy = true;
      }else{
        this.gobuy = false;
      }
      this.actionSheet=true;
      console.log(this.gobuy)
      console.log(this.isHasattr)
      this.checkattr()
      console.log(this.isdisable)
    },
    checkattr () {
      if(this.attrlist.length!==this.attrcount){
        this.isdisable = false
        return false
      }
      for (var i = 0; i < this.attrlist.length; i++) {
        if(!this.attrlist[i]||this.attrlist[i]===''){
          this.isdisable = false
          return false
        }
      }
      if(Number(this.data.goods_number<this.number)){
        this.isdisable = false
        return false
      }
      this.isdisable = true

    },
    async setcar () {
      console.log(this.attrlist.length)
      console.log(this.attrcount)
      console.log(this.number)
      if(this.attrlist.length!==this.attrcount){
        return false;
      }
      for (var i = 0; i < this.attrlist.length; i++) {
        if(!this.attrlist[i]||this.attrlist[i]===''){
          return false
        }
      }
      if(Number(this.data.goods_number<this.number)){
        showToast('库存不足')
        return false
      }
      isLogin(() => {
        let that = this
        let attr_ids= this.attrlist.join(',')
        let params = {
          id: this.$root.$mp.query.id,
          number: this.number,
          attr_ids: attr_ids
        }
        this.$_util.ajax.post('https://guo-a.com/mapi/cart/addcart?token=' + this.$store.state.Token,params).then((res) => {
            console.log(res)
            if(res.code===200){
               if(this.gobuy){
                  // wx.navigateTo({
                  //   url: '/pages/shopCart/main'
                  // })
                  that.bindSwitchTab('/pages/shopCart/main')
               }else{
                  showToast('加入购物车成功')
               }

               /*关闭弹层并重置数量*/
              this.actionSheet = false;
              this.number = 1;
            }else{
               handleError(res,this.setcar)
            }
        }).catch((err) => {
             showToast(err)
        })
      })
    },
    /**
     * 路由跳转
     */
    bindNavigateTo (url) {
        wx.navigateTo({
          url
        })
    },
    bindSwitchTab (url) {
        wx.switchTab({
          url
        })
    },
    /**
     * 收藏商品
     */
    async collect () {
      if(this.isCollect){
        showToast('已收藏')
        return false;
      }
      isLogin(() => {
          let params = {
             goods_id: this.$root.$mp.query.id
          }
          this.$_util.ajax.post('https://guo-a.com/mapi/collect/add?token=' + this.$store.state.Token,params).then((res) => {
             if(res.code === 200){
                this.isCollect = true
                showToast('收藏成功')
             }else{
              handleError(res,this.collect)
             }
          }).catch((err) => {
             showToast(err)
          })
      })
    },
    formatImg (str) {
      if (!str) {
        return str
      }
      return str.replace(/<img/gi, '<img style="max-width:100%;height:auto" ')
    },
    /**
     * 数量
     * @param value : 数量数值
     */
    numChange (value){
      this.number = value;
      this.checkattr()
      console.log(this.isdisable)
    },
    chek(index2,index,v,price){
        this.iac[index2]=index
        this.iac = this.iac.concat([])
        this.attrlist[index2] = v
        this.attrprice[index2] = price
        console.log(this.iac)
        console.log(this.attrlist)
        console.log(this.attrlist.length)
        console.log(this.attrcount)

        if(this.attrlist.length!==this.attrcount){
          return false;
        }
        for (var i = 0; i < this.attrlist.length; i++) {
          if(!this.attrlist[i]||this.attrlist[i]===''){
            return false
          }
        }
        let attrprice = 0
        for (var i = 0; i < this.attrprice.length; i++) {
          attrprice +=Number(this.attrprice[i])
        }
        this.data.shop_price = this.Originalprice + attrprice
        this.data.shop_price = this.data.shop_price.toFixed(2)
        let attr_ids= this.attrlist.join(',')
        let params = {
          id: this.$root.$mp.query.id,
          number: this.number,
          attr_ids: attr_ids
        }
        this.$_util.ajax.post('https://guo-a.com/mapi/product/get_goods_number',params).then((res) => {
          console.log(res)
          this.data.goods_number = res.attr_num
          if(res.code===300){
            this.number = res.number
          }
        })
        this.checkattr()
    },
    bouncer(arr) {
      // Don't show a false ID to this bouncer.
      return arr.filter(function(val){
        return !(!val || val === "");
      });
    },
    /*
    分享成功回调
     */
    async getticket () {
      this.$_util.ajax.post('https://guo-a.com/mapi/ticket/get_share_ticket?token=' + this.$store.state.Token).then((res) => {
        console.log('分享成功回调')
           if(res.code === 200 ){
              this.load()
           }
       })
    }
  },
  onShow () {
    /* url参数 */
    console.log(this.$root.$mp.query)
    this.isHasattr = false
    this.iac = []
    this.attrcount = 0
    this.attrlist = []
    this.isCollect = false;
    this.gobuy = false
    this.actionSheet = false;
    this.number = 1;
    this.load()
  },

  created () {
  },
  mounted () {

  },
  /*小程序分享*/
  onShareAppMessage: function () {
    let that = this
    return {
      title: this.data.goods_name,
      desc:  '',
      path: '/pages/shopDetail/main?id=' + this.$root.$mp.query.id,
      success: function(res){
　　　　　　// 转发成功之后的回调
　　　　　　if(res.errMsg == 'shareAppMessage:ok'){
              that.getticket()
　　　　　　}
　　　　},
    }
  }
}
</script>
